<template>
  <view class="container">
    <view class="prototype-container">
      <view class="prototype">
        <!-- 状态栏 -->
        <view class="status-bar">
          <view class="time">{{currentTime}}</view>
          <view class="status-icons">
            <text class="signal">●●●</text>
            <text class="wifi">📶</text>
            <text class="battery">🔋</text>
          </view>
        </view>
        
        <!-- 头部 -->
        <view class="header">
          <view class="logo-wrapper">
            <view class="logo">
              <text style="color: #2989d8; font-size: 24px; font-weight: 600;">医</text>
            </view>
          </view>
          <view class="app-name">智慧医疗</view>
        </view>
        
        <!-- 品牌标题 -->
        <view class="brand-title" :class="{'slide-up': showContent}">
          <view class="brand-name">智慧医疗平台</view>
          <view class="brand-slogan">全面提升医疗服务质量</view>
        </view>
        
        <!-- 年份徽章 -->
        <view class="year-badge" :class="{'fade-in': showContent}">
          <text class="year-text">2024</text>
          <view class="divider"></view>
        </view>
        
        <!-- 活动标题 -->
        <view class="event-title" :class="{'slide-in': showContent}">
          <text class="event-text">医疗会晤</text>
          <text class="event-subtext">服务平台</text>
        </view>
        
        <!-- 山形背景 -->
        <view class="mountain-bg"></view>
        <view class="overlay-gradient"></view>
        
        <!-- 登录容器 -->
        <view class="login-container" :class="{'slide-up': showContent}" v-show="currentForm === 'login'">
          <view class="login-content">
            <view class="header">
              <view class="logo-wrapper">
                <view class="logo">
                  <text style="color: #2989d8; font-size: 24px; font-weight: 600;">医</text>
                </view>
              </view>
              <view class="app-name">智慧医疗</view>
            </view>
            
            <view class="login-form">
              <view class="form-title">账号登录</view>
              
              <view class="form-item">
                <text class="form-label">登录方式</text>
                <view class="login-type-selector">
                  <view 
                    class="login-type-option active"
                  >
                    手机号登录
                  </view>
                </view>
              </view>
              
              <view class="form-item">
                <text class="form-label">手机号</text>
                <input 
                  type="text" 
                  v-model="loginForm.phone" 
                  placeholder="请输入手机号" 
                  class="form-input"
                />
              </view>
              
              <view class="form-item">
                <text class="form-label">密码</text>
                <input 
                  :type="showPassword ? 'text' : 'password'" 
                  v-model="loginForm.password" 
                  placeholder="请输入密码" 
                  class="form-input"
                />
                <text 
                  class="password-toggle" 
                  @click="showPassword = !showPassword"
                >{{showPassword ? '👁️' : '👁️‍🗨️'}}</text>
              </view>
              
              <view class="form-options">
                <view class="remember-me">
                  <checkbox :checked="rememberMe" @click="rememberMe = !rememberMe" color="#2989d8" />
                  <text>记住我</text>
                </view>
                <view class="forgot-password" @click="goToForgotPassword">忘记密码？</view>
              </view>
              
              <button class="login-btn" @click="handleLogin">登录</button>
              
              <view class="register-link">
                <text>还没有账号？</text>
                <text class="link" @click="toggleForms('register')">立即注册</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 注册容器 -->
        <view class="register-container" :class="{'slide-up': showContent}" v-show="currentForm === 'register'">
          <view class="form-header">
            <text class="back-button" @click="toggleForms('login')">←</text>
            <text class="login-title">注册账号</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">手机号码</text>
            <view class="input-wrapper" :class="{'active': activeInput === 'phone'}">
              <text class="input-icon">📱</text>
              <input 
                type="number" 
                class="input-field" 
                placeholder="请输入手机号码" 
                v-model="registerForm.phone"
                @focus="activeInput = 'phone'"
                @blur="activeInput = ''"
              />
            </view>
          </view>
          
          <view class="input-group">
            <text class="input-label">身份证号</text>
            <view class="input-wrapper" :class="{'active': activeInput === 'idCard'}">
              <text class="input-icon">🪪</text>
              <input 
                type="text" 
                class="input-field" 
                placeholder="请输入身份证号" 
                v-model="registerForm.idCard"
                @focus="activeInput = 'idCard'"
                @blur="activeInput = ''"
              />
            </view>
          </view>
          
          <view class="input-group">
            <text class="input-label">验证码</text>
            <view class="verification-group">
              <view class="input-wrapper verification-input-wrapper" :class="{'active': activeInput === 'code'}">
                <text class="input-icon">🔑</text>
                <input 
                  type="text" 
                  class="input-field" 
                  placeholder="请输入验证码" 
                  v-model="registerForm.code"
                  @focus="activeInput = 'code'"
                  @blur="activeInput = ''"
                />
              </view>
              <button 
                class="verification-button" 
                :class="{'disabled': countdown > 0}"
                @click="handleSendCode"
              >
                {{countdown > 0 ? `${countdown}s` : '获取验证码'}}
              </button>
            </view>
          </view>
          
          <view class="input-group">
            <text class="input-label">设置密码</text>
            <view class="input-wrapper" :class="{'active': activeInput === 'registerPassword'}">
              <text class="input-icon">🔒</text>
              <input 
                :type="showRegisterPassword ? 'text' : 'password'" 
                class="input-field" 
                placeholder="请设置密码" 
                v-model="registerForm.password"
                @focus="activeInput = 'registerPassword'"
                @blur="activeInput = ''"
              />
              <text 
                class="password-toggle" 
                @click="showRegisterPassword = !showRegisterPassword"
              >{{showRegisterPassword ? '👁️' : '👁️‍🗨️'}}</text>
            </view>
          </view>
          
          <view class="input-group">
            <text class="input-label">确认密码</text>
            <view class="input-wrapper" :class="{'active': activeInput === 'confirmPassword'}">
              <text class="input-icon">🔒</text>
              <input 
                :type="showConfirmPassword ? 'text' : 'password'" 
                class="input-field" 
                placeholder="请再次输入密码" 
                v-model="registerForm.confirmPassword"
                @focus="activeInput = 'confirmPassword'"
                @blur="activeInput = ''"
              />
              <text 
                class="password-toggle" 
                @click="showConfirmPassword = !showConfirmPassword"
              >{{showConfirmPassword ? '👁️' : '👁️‍🗨️'}}</text>
            </view>
          </view>
          
          <button class="login-button" :class="{'button-active': isButtonActive}" @touchstart="buttonTouchStart" @touchend="buttonTouchEnd" @click="handleRegister">
            <text class="button-text">注 册</text>
            <view class="button-effect"></view>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { login, register, sendCode } from '@/api/user.js'

export default {
  components: {
  },
  data() {
    return {
      currentTime: '9:41',
      showContent: false,
      currentForm: 'login',
      activeInput: '',
      isButtonActive: false,
      showPassword: false,
      showRegisterPassword: false,
      showConfirmPassword: false,
      countdown: 0,
      rememberMe: false,
      loginForm: {
        phone: '',
        password: ''
      },
      registerForm: {
        phone: '',
        idCard: '',
        code: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  mounted() {
    this.updateTime()
    this.startAnimation()
    setInterval(this.updateTime, 1000)
    this.getCookie()
  },
  methods: {
    updateTime() {
      const now = new Date()
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      this.currentTime = `${hours}:${minutes}`
    },
    startAnimation() {
      setTimeout(() => {
        this.showContent = true
      }, 300)
    },
    buttonTouchStart() {
      this.isButtonActive = true
    },
    buttonTouchEnd() {
      this.isButtonActive = false
    },
    toggleForms(formType) {
      this.currentForm = formType
      this.activeInput = ''
    },
    startCountdown() {
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    getCookie() {
      const phone = uni.getStorageSync('phone')
      const password = uni.getStorageSync('password')
      const rememberMe = uni.getStorageSync('rememberMe')
      
      if (rememberMe === 'true') {
        this.rememberMe = true
        this.loginForm = {
          phone: phone || '',
          password: password || ''
        }
      }
    },
    async handleLogin() {
      // 验证输入
      if (!this.loginForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      
      // 保存登录信息
      if (this.rememberMe) {
        uni.setStorageSync('phone', this.loginForm.phone)
        uni.setStorageSync('password', this.loginForm.password)
        uni.setStorageSync('rememberMe', 'true')
      } else {
        uni.removeStorageSync('phone')
        uni.removeStorageSync('password')
        uni.removeStorageSync('rememberMe')
      }
      
      // 显示加载
      uni.showLoading({
        title: '登录中...'
      })
      
      try {
        // 构建登录请求数据
        const loginData = {
          phone: this.loginForm.phone,
          password: this.loginForm.password
        }
        
        // 打印登录数据，用于调试
        console.log('登录请求数据:', loginData)
        
        // 发送登录请求
        const response = await login(loginData)
        
        uni.hideLoading()
        
        // 登录成功
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 跳转到首页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
      } catch (error) {
        uni.hideLoading()
        console.error('登录失败:', error)
      }
    },
    async handleRegister() {
      if (!this.registerForm.phone || !this.registerForm.idCard || !this.registerForm.code || 
          !this.registerForm.password || !this.registerForm.confirmPassword) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }
      
      // 验证身份证号格式
      if (!/^\d{17}[\dXx]$/.test(this.registerForm.idCard)) {
        uni.showToast({
          title: '请输入正确的18位身份证号',
          icon: 'none'
        })
        return
      }
      
      try {
        // 打印请求数据，用于调试
        console.log('注册请求数据:', {
          userId: this.registerForm.idCard,
          userIdType: 'idcard', // 添加标识，表明userId是身份证号，不需要加密
          userName: this.registerForm.phone,
          nickName: '用户' + this.registerForm.phone.substring(this.registerForm.phone.length - 4),
          phonenumber: this.registerForm.phone,
          phone: this.registerForm.phone,
          code: this.registerForm.code,
          password: this.registerForm.password
        })
        
        await register({
          userId: this.registerForm.idCard, // 使用身份证号作为user_id
          userIdType: 'idcard', // 添加标识，表明userId是身份证号，不需要加密
          userName: this.registerForm.phone, // 使用手机号作为用户名
          nickName: '用户' + this.registerForm.phone.substring(this.registerForm.phone.length - 4), // 使用手机号后4位作为昵称
          phonenumber: this.registerForm.phone, // 注意后端字段名可能是phonenumber而不是phone
          phone: this.registerForm.phone, // 添加phone字段，确保后端能接收到
          code: this.registerForm.code,
          password: this.registerForm.password,
          sex: '0', // 默认性别
          status: '0' // 默认状态
        })
        
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })
        this.toggleForms('login')
      } catch (error) {
        console.error('注册失败:', error)
      }
    },
    async handleSendCode() {
      if (this.countdown > 0) return
      
      if (!this.registerForm.phone) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return
      }
      
      try {
        await sendCode({
          phone: this.registerForm.phone
        })
        
        uni.showToast({
          title: '验证码已发送: 123456',
          icon: 'success',
          duration: 3000
        })
        
        // 自动填充验证码
        this.registerForm.code = '123456'
        
        this.startCountdown()
      } catch (error) {
        console.error('发送验证码失败:', error)
      }
    },
    goToForgotPassword() {
      uni.navigateTo({
        url: '/pages/forgot-password/forgot-password'
      })
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f7fa;
}
/* 登录页面 */
.prototype-container {
  width: 375px;
  height: 812px;
  margin: 0 auto 20px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 10px solid #000;
  background-color: #ffffff;
}
/* 登录页面背景 */
.prototype {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%);
}
/* 登录页面背景 */
.overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.status-bar {
  height: 44px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.time {
  font-weight: bold;
  letter-spacing: 1px;
}

.status-icons {
  display: flex;
  gap: 8px;
  opacity: 0.9;
}

.header {
  padding: 20px;
  display: flex;
  align-items: center;
}

.logo-wrapper {
  position: relative;
}

.logo {
  width: 44px;
  height: 44px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.logo:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* 登录页面标题 */
.app-name {
  color: rgb(5, 4, 4);
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.brand-title {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-title.slide-up {
  opacity: 1;
  transform: translateY(0);
}

.brand-name {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.brand-slogan {
  font-size: 14px;
  opacity: 0.9;
  letter-spacing: 1px;
}

/* 年份徽章 */
.year-badge {
  position: absolute;
  top: 35%;
  left: 42%;
  transform: translateX(-50%) scale(0.9);
  color: white;
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.year-badge.fade-in {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.year-badge::after {
  content: "";
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 15px;
}

/* 活动标题 */
.event-title {
  position: absolute;
  top: 35%;
  left: 51%;
  transform: translateX(30px);
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 1.4;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.event-title.slide-in {
  opacity: 1;
  transform: translateX(10px);
}

.event-text, .event-subtext {
  display: block;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mountain-bg {
  position: absolute;
  bottom: 65%;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff' fill-opacity='1' d='M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,213.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

/* 登录和注册容器 */
.login-container, .register-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 53%;
  background-color: rgb(255, 255, 255);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 20px 25px 30px;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.login-container.slide-up, .register-container.slide-up {
  transform: translateY(0);
  opacity: 1;
}

.register-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-color: white;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
  box-shadow: none;
  border-radius: 0;
}

.register-container.slide-up {
  transform: translateY(0);
  opacity: 1;
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-button {
  font-size: 24px;
  color: #666;
  padding: 10px;
  margin-left: -10px;
  cursor: pointer;
}

.login-title {
  flex: 1;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
}

.input-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0 15px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.input-wrapper.active {
  border-color: #2989d8;
  box-shadow: 0 0 0 2px rgba(41, 137, 216, 0.1);
}

.input-icon {
  margin-right: 10px;
  font-size: 16px;
  color: #999;
}

.input-field {
  flex: 1;
  height: 100%;
  border: none;
  font-size: 16px;
  background: transparent;
}

.input-field:focus {
  outline: none;
}

.password-toggle {
  padding: 5px;
  color: #999;
  cursor: pointer;
}

.verification-group {
  display: flex;
  gap: 10px;
}

.verification-input-wrapper {
  flex: 1;
}

.verification-button {
  padding: 0 20px;
  background: #2989d8;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.verification-button.disabled {
  background: #ccc;
  cursor: not-allowed;
}

.login-button {
  position: relative;
  height: 50px;
  background: linear-gradient(135deg, #1e5799, #2989d8);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.button-text {
  position: relative;
  z-index: 1;
}

.button-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.button-active .button-effect {
  width: 200%;
  height: 200%;
}

.additional-options {
  margin-top: 20px;
  text-align: center;
}

.forgot-password {
  text-align: right;
  font-size: 14px;
  color: #666;
  margin: 10px 0;
  cursor: pointer;
}

.login-options {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

.option-text {
  margin-right: 5px;
}

.register-link, .login-link {
  color: #2989d8;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.register-link:active, .login-link:active {
  opacity: 0.7;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 登录类型选择器 */
.login-type-selector {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.login-type-option {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  color: #666;
  transition: all 0.3s ease;
}

.login-type-option.active {
  border-bottom: 2px solid #2989d8;
  color: #2989d8;
  font-weight: 500;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  color: #999;
}

.form-input {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 0 15px;
  font-size: 16px;
}
</style> 